import React, { Component } from "react";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Form, Input, Space, message } from "antd";
import Captcha from "../../components/Captcha";

// 引入高阶组件强化函数HOC withRouter
// 注意: 只有通过路由跳转的组件,它的props属性中才有路由的三个参数对象 history,location match
// 如果需要的话,则需要使用类组件使用 WithRouter  函数组件 使用 三个hooks useHistory useLocation useParams
import { withRouter } from "react-router-dom";
// 引入封装后的axios
import axios from "@/http/http";
// 引入请求地址对象
import url from "@/config/url";
// 引入js-cookie
import Cookies from "js-cookie";

class NormalLogin extends Component {
  state = {
    key: "", // 验证码子组件传给当前组件的key,是验证码的唯一标识
  };
  render() {
    return (
      <div>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={this.onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: "请输入用户名!" }]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="用户名"
              size="large"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "请输入密码!" }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="密码"
              size="large"
            />
          </Form.Item>
          <Space>
            <Form.Item
              name="captcha"
              rules={[{ required: true, message: "请输入验证码!" }]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="text"
                placeholder="验证码"
                size="large"
              />
            </Form.Item>
            <Form.Item>
              {/* 验证码组件 */}
              <Captcha getKey={this.getKey} w={120}></Captcha>
            </Form.Item>
          </Space>

          <Form.Item>
            <Button
              type="primary"
              size="large"
              htmlType="submit"
              className="login-form-button"
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
  // 该事件时子传父
  getKey = (key) => {
    console.log(key); // 验证码标识符
    this.setState({
      key: key,
    });
  };

  // 提交事件
  onFinish = (values) => {
    console.log("Received values of form: ", values);
    // 给values 参数对象添加key属性
    values.key = this.state.key;
    console.log(values);
    // axios发起post请求
    axios
      .post(url.pwdLogin, values)
      .then((res) => {
        console.log(res);
        if (res.data.errNo === 0) {
          // 登录成功
          // 01: 做一次提示adnt
          // 02: 将jwt(jsonwebtoken==token)存在本地
          // 03: 将用户的权限菜单 数组也存在localStorage
          // 04: 跳转到首页
          message.success("登录成功", 1);
          // 将用户登录成功后的jwt(jsonwebtoken==token) 存到cookie中
          Cookies.set("jwt", res.data.context.jwt);
          localStorage.setItem("acl", JSON.stringify(res.data.context.acl));
          this.props.history.push("/dashboard");
        } else {
          // 登录失败
          message.error(res.data.errText, 2);
        }
      })
      .catch((e) => {});
  };
}

export default withRouter(NormalLogin);
